<script setup>
import {defineProps} from 'vue'

const props = defineProps({
  direction: {
    type: String,
    default: 'row',
    validator: (value) => {
      return ['row', 'column', 'row-reverse', 'column-reverse'].includes(value)
    }
  },
  alignItems: {
    type: String,
    default: 'center',
    validator: (value) => {
      return ['center', 'start', 'end', 'stretch', 'baseline'].includes(value)
    }
  },
  justifyContent: {
    type: String,
    default: 'center',
    validator: (value) => {
      return ['center', 'start', 'end', 'space-between', 'space-around', 'space-evenly'].includes(value)
    }
  },
  height: {
    type: String,
    default: '100%',
  },
})
</script>

<template>
  <div
      class="flex-container"
      :style="{
      display: 'flex',
      height: height+'',
      flexDirection: direction,
      alignItems: alignItems,
      justifyContent: justifyContent
    }"
  >
    <slot></slot>
  </div>
</template>

<style scoped>
.flex-container {
  width: 100%;
}
</style>